<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
    <title> - 登录</title>
    <meta name="keywords" content="">
    <meta name="description" content="">
    <link href="/css/bootstrap.min.css" rel="stylesheet">
    <link href="/css/font-awesome.css?v=4.4.0" rel="stylesheet">
    <link href="/css/animate.css" rel="stylesheet">
    <link href="/css/style.css" rel="stylesheet">
    <link href="/css/login.css" rel="stylesheet">
    <!--[if lt IE 9]>
    <meta http-equiv="refresh" content="0;ie.html" />
    <![endif]-->
    <script>
        if (window.top !== window.self) {
            window.top.location = window.location;
        }
    </script>

    <style>
    .fl{float: left;}
    .fr{float: right;}
    .m0a{margin: 0 auto;}
    .disn{display: none;}
    .disb{display: block;}
        #code{
            border-radius: 1px;
            display: block;
            width: 72px;
            line-height: 26px;
            height: 30px;
            font-size: 16px;
            margin-right: 55px;
        }
        .new-password{}
    </style>

</head>

<body class="signin">


    <div class="signinpanel disb" id="log" style="z-index: 2;">
        <div class="row">
            <div class="col-sm-12">
                <form method="post" action="/do_login" method="post">
                    <h2 class="no-margins" style="font-size: 18px;">分销管理系统 - 登录<p class="m-t-md"></p></h2>
                    <input type="text" name="username" autocomplete="new-password" value="" class="form-control uname" placeholder="用户名" />
                    <input type="password" name="password" autocomplete="new-password" value="" class="form-control pword m-b" placeholder="密码" />
                    <input  style="width:123px;height:30px;display: inline-block;float: left;" autocomplete="new-password" id="validateCode"  class="form-control" name="validateCode"  type="text" placeholder="请输入验证码" value="">
                    <img  class="pic_img"src="/validateCode" alt="" onclick="this.src='/validateCode?'+Math.random() ">
                    {!! csrf_field() !!}
                    <input type="hidden" name="_token" value="{{ csrf_token() }}">
                    <button class="btn btn-block">登录</button>
                    <p class="login_text">没有帐号？<a id="qh_reg" style="text-decoration: underline;">立即注册</a></p>
                </form>
            </div>
        </div>

<!--         <script>
            function getId(id) {
                return document.getElementById(id);
            }
        </script>
        <input type="button" id="btn1" value="创建一个按钮">
        <input type="button" id="btn2" value="移除第一个按钮">
        <input type="button" id="btn3" value="清空">
        <div id="dv"></div>
        <script>
            var a = 0;
            console.log(a);
            getId("btn1").onclick = function () {
                a++;
                console.log(a);
                var btn = document.createElement("input");
                btn.type = "button";
                btn.value = "button" + a;
                getId("dv").appendChild(btn);          
            }
        </script> -->


    </div>



    <div class="signinpanel disn" id="reg" style="z-index: 2;">
        <div class="row">
            <div class="col-sm-12">



                <form method="post" action="/do_register" method="post">
                    <h2 class="no-margins" style="font-size: 18px;">分销管理系统 - 注册<p class="m-t-md"></p></h2>
                    <input type="text" name="fcode" id="fcode_reg" value="" class="form-control uname" placeholder="邀请码" />
                    <input type="text" name="username" id="username_reg" value="" class="form-control uname" placeholder="用户名" />
                    <input type="password" name="password" id="password_reg" value="" class="form-control pword m-b" placeholder="密码" />
                    <input type="text" name="mobile" id="mobile_reg" value="" class="form-control uname" placeholder="手机号" />
                    <input  style="width:123px;height:30px;display: inline-block;float: left;" id="validateCode_reg"  class="form-control" name="validateCode"  type="text" placeholder="请输入验证码" value="">
                    <img  class="pic_img"src="/validateCode" alt="" onclick="this.src='/validateCode?'+Math.random() ">
                    <input  style="width:123px;height:30px;margin-top: 30px;" id="sms_code"  class="form-control" name="sms_code"  type="text" placeholder="请输入手机验证码" value="">
                    <input class="code" type="button" id="code_reg" value="获取手机验证码">
                    {!! csrf_field() !!}
                    <!-- <input type="hidden" name="_token" value="{{ csrf_token() }}"> -->
                    <button class="btn btn-block reg_btn">注册</button>
                    <p class="login_text">已有帐号？
                        <a id="qh_log" style="text-decoration: underline;">立即登录</a>
                    </p>
                </form>



            </div>
        </div>
    </div>




    <div class="banner" style="height: 888px;z-index: 1">
        <div style="width: 1024px;height: 600px;position: absolute;top: 0px;">
            <canvas id="canvas" height="800"></canvas>
        </div>
    </div>

<script type="text/javascript" src="PC/js/jquery-3.3.1.js"></script>
<script type="text/javascript" src="PC/js/login.js"></script>
<script>


$(document).ready(function(){


    //cancas画布 begin
    var $ = jQuery;
    var $canvas = document.getElementById ( "canvas" );
    var context = $canvas.getContext ( "2d" );

    calcCanvasHeight ();
    window.onresize = calcCanvasHeight;

    function calcCanvasHeight () {
        $canvas.height = $ ( "#canvas" ).parents ( ".banner" ).height ();
        $canvas.width = $ ( "#canvas" ).parents ( ".banner" ).width ()
    }

    var requestAnimationFrame = function () {
        return window.requestAnimationFrame
            || window.webkitRequestAnimationFrame
            || window.mozRequestAnimationFrame
            || window.oRequestAnimationFrame
            || window.msRequestAnimationFrame
            || function ( func ) {
                window.setTimeout ( func , 1e3 / 60 )
            }
    } ();

    var mousePoint = { x : null , y : null , max : 2e4 };
    window.onmousemove = function ( evt ) {
        evt = evt || window.event;
        mousePoint.x = evt.clientX;
        mousePoint.y = evt.clientY
    };
    window.onmouseout = function () {
        mousePoint.x = null;
        mousePoint.y = null
    };
    var points = [];
    var pointCount = 200;
    if ( document.body.clientWidth < 1000 ) pointCount = 50;
    for (var i = 0 ; i < pointCount ; i++) {
        var x = Math.random () * $canvas.width;
        var y = Math.random () * $canvas.height;
        var xa = Math.random () * 2 - 1;
        var ya = Math.random () * 2 - 1;
        points.push ( { x : x , y : y , xa : xa , ya : ya , max : 5e3 } )
    }
    setTimeout ( function () {
        draw ()
    } , 100 );

    function draw () {
        context.clearRect ( 0 , 0 , $canvas.width , $canvas.height );
        var allPoints = [ mousePoint ].concat ( points );
        points.forEach ( function ( point ) {
            point.x += point.xa;
            point.y += point.ya;
            point.xa *= point.x > $canvas.width || point.x < 0 ? -1 : 1;
            point.ya *= point.y > $canvas.height || point.y < 0 ? -1 : 1;
            context.fillStyle = "#fff";
            context.fillRect ( point.x - .5 , point.y - .5 , 1 , 1 );
            for (var i = 0 ; i < allPoints.length ; i++) {
                var cur = allPoints[ i ];
                if ( point === cur || cur.x === null || cur.y === null ) continue;
                var diffX = point.x - cur.x;
                var diffY = point.y - cur.y;
                var l = diffX * diffX + diffY * diffY;
                var opacity;
                if ( l < cur.max ) {
                    if ( cur === mousePoint && l > cur.max / 2 ) {
                        point.x -= diffX * .03;
                        point.y -= diffY * .03
                    }
                    opacity = (cur.max - l) / cur.max;
                    context.beginPath ();
                    context.lineWidth = opacity * 2;
                    context.strokeStyle = "rgba(105,237,249," + (opacity + .2) + ")";
                    context.moveTo ( point.x , point.y );
                    context.lineTo ( cur.x , cur.y );
                    context.stroke ()
                }
            }
            allPoints.splice ( allPoints.indexOf ( point ) , 1 )
        } );
        requestAnimationFrame ( draw )
    }
})
</script>

</body>

</html>
